import { View, Text, Image } from "@tarojs/components";
import Taro, { useLoad } from "@tarojs/taro";
import { Button, Cell, CellGroup, Empty, NavBar } from "@nutui/nutui-react-taro";
import { Share, More, Cart, ArrowLeft, Close } from '@nutui/icons-react-taro'
import { c } from "../../common";
import { useEffect, useState } from "react";
import { getParams, navigateTo } from "../../common/_";
// import { Right } from "@nutui/icons-react-taro";

import { selectExamDetail, startExam } from "../../api/ceshi";
import { baseUrl } from "../../utils/request";
import { empty01 } from "../../assets/files";
import useNavInfo from "../../hooks/useNavInfo";
import "./index.scss";

export default function Mine() {
  const [cur, setCur] = useState(0)
  const [questionType, setQuestionType] = useState([
    {
      id: 1,
      name: "单选题",
      color: '#6486FF',
      bgColor: 'rgba(65, 95, 255, 0.05)'
    },
    {
      id: 2,
      name: "多选题",
      color: '#44C0E8',
      bgColor: 'rgba(65, 221, 255, 0.05)'
    },
    {
      id: 3,
      name: "判断题",
      color: '#FF8964',
      bgColor: 'rgba(255, 145, 65, 0.05)'
    },
  ]);
  const [questionList, setQuestionList] = useState([]);

  useEffect(() => {
    getRequest(getParams().userExamId, getParams().examResult || "")
    // getRequest("1800448708460593154", 2)
  }, [])

  async function getRequest(userExamId, examResult) {
    Taro.showLoading()
    const { data } = await selectExamDetail({ userExamId, examResult })
    setQuestionList(data)
    Taro.hideLoading()
  }

  function matchType(type) {
    for (let index = 0; index < questionType.length; index++) {
      const element = questionType[index];
      if (element.id === type) {
        return element
      }

    }
  }

  function nextRequest(item) {
    if (cur === questionList.length - 1) {
      Taro.navigateBack({
        delta: 1
      })
      return;
    }
    let curren = cur
    curren = curren + 1
    setCur(curren)
  }

  return (
    <View className="wrap" style={{ backgroundColor: questionList.length > 0 ? "#EEF1F7" : '#fff' }}>

      {questionList.length > 0 ? questionList.map((item, index) => {
        return (
          <View>
            <View className="reWrap" key={index} >
              <View className="reTitWrap">
                <View className="retitTop">

                  <View className="reTypeWrap">
                    <View className="bss"></View>
                    <Text className="questionType" style={{}}>{matchType(item.questionType).name}</Text>
                    <View className="ftype">
                      <Text>{item.questionTypeName}</Text>
                    </View>
                  </View>

                  <View>
                    <Text className="questTit">
                      {index + 1}.{item.questionSubject}
                    </Text>
                  </View>
                </View>

                <View className="reItemWrap">
                  {
                    item?.optionMiniResponses.map((v, i) => {
                      return (
                        <View className="reItem" key={i}>
                          <View className={
                            v.isUserOption === 1 ?
                              (v.isRightOption === 1 && v.isUserOption === v.isRightOption && item.examResult === 1) ? "tagWrapSelect" : 'tagRedWrap' :
                              "tagWrap"
                          }>
                            <Text style={{ color: v.isUserOption === 1 ? "#fff" : '#212121' }} className="tagName">{v.questionOption}</Text>
                          </View>
                          {
                            v.optionType === 1 ?
                              <Text className="reContent">{v.optionContent}</Text>
                              :
                              <Image className="ansImgSty" src={baseUrl + v.optionContent} />
                          }

                        </View>
                      )
                    })
                  }
                </View>
              </View>

              {
                item?.rightQuestionOptions?.length <5 ?

                  <View className="myAns">
                    <View>
                      <Text>正确答案：</Text>
                      <Text style={{ color: '#54C8A1' }}>
                        {
                          item.rightQuestionOptions.map((v, i) => {
                            return v.questionOption + " "
                          })
                        }
                      </Text>
                    </View>
                    <View>
                      <Text>我的答案：</Text>
                      <Text style={{ color: item.examResult === 1 ? '#54C8A1' : '#FA615C' }}>
                        {
                          item.userQuestionOptions.map((v, i) => {
                            return v.questionOption + " "
                          })
                        }
                      </Text>
                    </View>
                  </View>
                  :
                  <View className="myAnsTwo">
                    <View>
                      <Text>正确答案：</Text>
                      <Text style={{ color: '#54C8A1' }}>
                        {
                          item.rightQuestionOptions.map((v, i) => {
                            return v.questionOption + " "
                          })
                        }
                      </Text>
                    </View>
                    <View>
                      <Text>我的答案：</Text>
                      <Text style={{ color: item.examResult === 1 ? '#54C8A1' : '#FA615C' }}>
                        {
                          item.userQuestionOptions.map((v, i) => {
                            return v.questionOption + " "
                          })
                        }
                      </Text>
                    </View>
                  </View>
              }






              {/* <View className="btnWrap" onClick={() => nextRequest(item)}>
                  <Button
                    block
                    type="info"
                    size="large"
                  >
                    {cur === questionList.length - 1 ? '返回' : '下一题'}
                  </Button>
                </View> */}

            </View>


          </View>
        );
      })
        :
        <Empty
          description="无数据"
          image={
            <img
              src={empty01}
              alt=""
            />
          }
        />
      }
    </View>
  );
}
